<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h1{
        margin: 50px 100px;
        }
        div{
            margin: 50px 100px;
        }
    </style>
</head>
<body>
    <div>
        <h2>移动端</h2>
        px<br>
        移动端<br>
        rem (根据根元素的字体大小改变)<br>
        em  (根据父级的字体大小改变)<br>
        name="viewport"  屏幕视图<br>
        width=device-width  页面等于屏幕的宽度<br>
        height=device-height   页面等于屏幕的高度<br>
        initial-scale=1.0    初始化缩放比例<br>
        minimum-scale=1.0  最小缩放比例<br>
        maximum-scale=1.0 最大缩放比例<br>
        user-scalable=no   是否允许用户缩放<br>
        meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"<br>
        js代码：<br>
        document.getElementsByTagName("html")[0].style.fontSize = window.innerWidth / 15 + "px";<br>
    </div>
    <div>
        <h2>HTML5新标签</h2>
            H5新增标签: article 定义文章  header 定义头部  aside ,定义文章的侧边栏<br>
            hgroup 定义网页标题的组合   figure   图像符号                  figcaption 定义figure的标题    <br>  
            nav 定义导航      section定义文档的区块     footer 定义页脚     time定义时间<br>
            mark 标记标签      address  地址    <br>
            可选数据列表<br>
            input type="text" list="abc"<br>
            datalist   id="abc"<br>
                option value="1"一option<br>
            datalist<br>
            audio  音频<br>
            src 引用音频路径    controls控制    autoplay 自动播放   loop 循环播放  method 静音 preload 预加载<br>
            音频格式:mp3,ogg,wav<br>
            兼容写法:<br>
            audio controls  loop mrthod autoplay<br>
                source src="tq.ogg" type="audio/ogg"<br>
                source src="tq.mp3" type="audio/mp3"<br>
                source src="tq.wav" type="audio/wav"<br>
            /audio<br>
            video  视频<br>
                    支持格式: Ogv、MPEG4、WebM、mp4<br>
                    语法：<br>
                    video src=""/video<br>
                    poster  设置视频播放的首屏图片<br>
                    width/height 设置播放窗口的宽高<br>
                    src和href的区别：src引入 href是引用；<br>
    </div>
    <div>
        <h2>HTML5表单新增的input类型</h2>
        表单<br>
        method 发送的格式  post（安全性比较高）  get（比较低）<br>
        action  发送的路径<br>
            type<br>
            颜色 color<br>
            电话 tel<br>
            邮件 email<br>
            数字 number<br>
            网址 url<br>
            滑动 range<br>
            年月日date<br>
            年月  month<br>
            年周  week<br>
            时分  time<br>
            年月日时分  datetime-local<br>
            搜索    scroll<br>
            属性 <br>
            最大值max<br>
            最小值min<br>
            长度maxlength<br>
            禁止点击disabled<br>
            只读readonly<br>
            自动获取焦点autofocus<br>
            禁止输入disabled<br>
            必须填写required<br>
            倍数增长step<br>
            提示placeholder<br>
            pattern="[0-9a-z]"    正则<br>
    </div>
    <div>
        <h2>选择器</h2>
        h1 p     后代选择器<br>
        h1,p      群组选择器<br>
        h1.red   指定选择器<br>
        h1>p    子级选择器<br>
        +  相邻选择器    使用【+】连接2个元素，后者必须和前者同级，且html结构中必须紧跟在前者的后面（相邻)<br>
        ~   兄弟选择器   使用【~】连接2个元素，后者必须和前者同级，且html结构中存在于前者的后面（不需要相邻）<br>
        属性选择器<br>
            input[type]<br>
            input[type="text"]<br>
            input[type^="text"]   属性值在开始包含   (属性值不需要是完整词)<br>
            input[type$="text"]    属性值在结尾包含   (属性值不需要是完整词)<br>
            input[type*="text"]    属性值在任意位置包含   (属性值不需要是完整词)<br>
            选择器优先级: !important>style>id>class>标签>*<br>
    </div>
    <div>
        <h2>伪类</h2>
        交互式伪类<br>
        超链接的四种状态<br>
            :link  尚未访问过的链接状态<br>
            :visited  已访问过的链接状态<br>
            :hover    鼠标悬停时的状态<br>
            :active    鼠标被激活的状态（鼠标按下与释放之间)<br>
        表单<br>
            :focus  元素获取焦点是的状态    能通过键盘和鼠标激活的伪类<br>
            能够获取焦点的元素通常都是带有交互性的元素，如表单控件、超级链接等<br>
            普通的HTML元素(表单控件,超链接除外)想要获得焦点,需要加上一个tabindex属性<br>
    UI式伪类 : 主要作用于表单元素的某种状态<br>
            ：disabled  元素的禁用状态<br>
            ： enabled  元素的启用状态<br>
            :   required  元素的必填状态<br>
            ：optional   元素非必填状态<br>
            ：read-only  元素的只读状态<br>
            ：read-write  元素的可读又可写状态<br>
            :   valid          元素的验证成功状态<br>
            :    invalid      元素的验证无效状态<br>
            :    in-range   元素的值在预设范围内的状态<br>
            :    out-of-range    元素的值在预设范围外的状态<br>
            :    checked    元素的选中状态<br>
            ：  default     元素的默认交互状态<br>
            ：  indeterminate  元素处于不确定的状态<br>
        结构式伪类<br>
            :first-child  父元素中的第一个子元素<br>
            :last-child   父元素中的最后一个子元素<br>
            :nth-child()  父元素中的第几个子元素<br>
            :nth-last-child()  父元素中的按倒序排序的第几个子元素<br>
            :only-child         父元素中的唯一一个子元素<br>
            :first-of-type  父元素中同类型的第一个子元素<br>
            :last-of-type   父元素中同类型的最后一个子元素<br>
            :nth-of-type()  父元素中同类型的第几个子元素<br>
            :nth-last-of-type()  父元素中同类型的按倒序排序的第几个子元素<br>
            :only-of-type        父元素中具有唯一类型的子元素<br>
            :nth-child(odd)    父元素中的奇数子元素<br>
            :nth-child(even)    父元素中的偶数子元素:nth-child(2n)       父元素中表示几的倍数的子元素，2可以换成任何数字<br>
            :nth-child(3n+1)   自定义选取标签，隔几取一,3n+1就是隔二取一<br>
        其他伪类<br>
            :empty  代表没有子元素的元素<br>
            :not()     否定伪类,代表不匹配()中的对象的元素<br>
            :root      匹配文档树的根元素<br>
            :target   用于选取当前活动中的目标元素<br>
    </div>
    <div>
        <h2>伪元素</h2>
        ::before设置在对象前的内容上<br>
        ::after设置在对象后的内容上<br>
        使用::before和::after必须用content属性来创建内容<br>
        content常见的内容设置<br>
            1. 字符串类型：使用引号包括一段字符串，将会向元素内容中添加字符串<br>
                ::after{content:"字符串";}<br>
            2.属性类型：调用当前元素的属性，将content内容和对象的某个属性值进行关联<br>
            a ::after{content:attr(属性名);}<br>
            3.URL类型：引用外部资源，例如图片<br>
            h1::after{content:url(img/logo.jpg);}<br>
            ::first-line  文本属性的第一行<br>
            ::first-letter  文本属性的第一个字  首字下沉<br>
            ::selection     匹配对象中被用户选中或处于高亮状态的部分<br>
                ::selection仅支持色彩设置的css属性：<br>
                    color<br>
                    background-color<br>
                    text-shadow<br>
            ::placeholder    改变placeholder的文字颜色<br>
            语法:input::placeholder{<br>
                color：red;<br>
            }<br>
            针对浏览器的兼容的不同写法<br>
            ::-moz-placeholder   低版本火狐<br>
            ::-webkit-input-placeholder  低版本谷歌<br>
            ::-ms-input-placeholder       IE<br>
    </div>
    <div>
        <h2>色彩和背景</h2>
        六种颜色写法:<br>
		1.英文单词  (red,blue)<br>
		2.十六进制   (#ffffff，#000000)  范围:0-9  a-f<br>
		3.rgb   r：red红色 g：green 绿色 b：blue 蓝色<br>
		4.rgba     r：red红色 g：green 绿色 b：blue 蓝色，a透明度  取值:0-1<br>
		5.hsl       h：色调    s:饱和度   l:亮度<br>
		6.hsla     h：色调    s:饱和度   l:亮度  a:透明度<br>
		背景属性：<br>
				背景：background：（复合属性）<br>
				background-color   背景颜色<br>
				颜色的表现形式都可以使用<br>
				background-image  背景图片<br>
				url  （相对路径）同时使用背景颜色和背景图片的时候只会显示背景图片；<br>
				引入多张背景图片：<br>
					background-image: url(img/jpg01_03.jpg),url(img/4.jpg);	<br>
					background-size:100px 100px,100px 100px ;<br>
					background-position:left,right top;<br>
					background-repeat: no-repeat;<br>
				background-position背景定位<br>
				1. 英文参数<br>
					center：背景图像横向和纵向居中。<br>
					left：背景图像在横向上填充从左边开始。<br>
					right：背景图像在横向上填充从右边开始。<br>
					top：背景图像在纵向上填充从顶部开始。<br>
					bottom：背景图像在纵向上填充从底部开始。<br>
				2、通过具体数值进行定位<br>
				background-size    背景尺寸<br>
				1、百分比   第一个值指的是横向，第二个值是纵向；<br>
				2、具体数值  第一个值指的是横向，第二个值是纵向；<br>
				3、cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。<br>
				4、contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。<br>
				5、auto<br>
				background-repeat  背景是否重复<br>
				默认是重复<br>
				重复：    repeat<br>
				横向重复：	background-repeat:repeat-X<br>
				纵向重复:        background-repeat：repeat-Y<br>
				不重复：no-repeat<br>
				background-attachment   背景滚动<br>
				scroll  默认值，背景图是相对于元素自身固定，元素移动背景图跟随移动<br>
				fixed   背景图相对于浏览器窗口（视口）固定<br>
				background-origin   背景图片的位置区域<br>
				值：content-box  padding-box  border-box<br>
				   content-box: 在内容区域放置背景<br>
				    padding-box: 在内边距区域放置背景<br>
				    border-box: 在边框区域放置背景<br>
				background-clip   背景裁剪<br>
				值:border-box  背景覆盖到整个盒子区域<br>
				     padding-box 背景覆盖到padding区域<br>
				     content-box    背景覆盖到content区域<br>
				     text                    webkit特有值：背景仅覆盖文字区域<br>
    </div>
    <div>
        <h2>文本新增属性</h2>
        word-wrap:break-wrap<br>   
        对长的不可分钟割的单词进行分割并换行到下一行<br>
        text-shadow：1px 1px  2px yellow ;<br>
        文本阴影   第一个值是X轴,第二个值是Y轴,第三个值<br>
                是阴影模糊度,第四个值是颜色<br>
        text-overflow      文本溢出隐藏<br>
        white-space: nowrap;<br>
        overflow:hidden;<br>
        text-overflow:ellipsis;  <br>
        文本溢出的部分以小点显示<br>
        text-stroke:6px  yellow      文本描边<br>
        text-file-color:red      文本填充<br>
        设置文本填充的时候,color不起作用<br>
    </div>
    <div>
        <h2>渐变,阴影，圆角(border-radius)</h2>
        渐变<br>
            线性渐变:linear-gradient<br>
            径向渐变:radial-gradient<br>
            重复的线性渐变<br>
            background: repeating-linear-gradient<br>
            重复的径向渐变:<br>
            background:repeating-radial-gradient<br>
        阴影<br>
            box-shadow(盒子阴影): inset,x，y, 阴影模糊程度,阴影扩展度,颜色<br>
            text-shadow(文本阴影): inset,x，y, 阴影模糊程度,颜色<br>
        圆角<br>
            border-radius<br>
            四个值: 第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角。<br>
            三个值: 第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角<br>
            两个值: 第一个值为左上角与右下角，第二个值为右上角与左下角<br>
            一个值： 四个圆角值相同<br>
            border-radius最多可以设置8个值<br>
        盒子计算方式  box-sizing<br>
            border-box                怪异盒子模型   <br>
            计算方式:boxsize:width/height+padding+border<br>
            content-box(默认值)   标准盒子模型<br>
            计算方式:boxsize：width/height(包含content padding border)<br>
        轮廓线:outline  <br>
        轮廓线和边框线的区别:<br>
            轮廓线不会占据空间,也不会增加额外的宽度和高度,同时轮廓线也可能是非矩形的<br>
    </div>
    <div>
        <h2>过渡(transition)和transform</h2>
        transition 过渡：使css属性值,在一段时间内平缓而变化的效果,更好的提升用户体验<br>
        过渡的四大属性：<br>
                1.指定过渡属性：<br>
                        作用：指定哪个css属性在变化时,需要使用过渡<br>
                        属性:tansition-property<br>
                        取值: 1.属性名称<br>
                            2.none<br>
                            3.all<br>
                2.指定过渡时长:<br>
                        作用:过渡的效果在多长时间完成<br>
                        属性:transition-duration<br>
                        取值:以s或ms为单位的数值,默认值为0<br>
                3.指定过渡速度的时间曲线函数:指定变化的速率<br>
                        属性:transition-timing-function<br>
                        取值:1.ease   默认值 	慢-快-慢	<br>
                            2.linear 匀速<br>
                            3.ease-in  慢-加速<br>
                            4.ease-out   快-减速<br>
                            5.ease-in-out  慢-加速-减速-慢<br>
                4.过渡延迟:当用户激发操作后等待多长时间再显示效果<br>
                            属性:transition-delay<br>
                            取值:以s或者ms为单位的数值<br>
                简写: transition:property duration timing-function delay<br>
            transform<br>
                transform:translate(x,y)     位移<br>
                        px  %<br>
                transform:scale(x,y)   缩放  <br>
                    1>  放大<br>
                    0-1   缩小<br>
                    =-1  翻转<br>
                transform:skew(20deg,40deg)  倾斜<br>
                transform:rotate(720deg)  旋转<br>
                transform-origin 设置旋转基点 默认center center 第一个参数X第二个Y<br>
                浏览器前缀<br>
                谷歌    -webkit-<br>
                ie        -ms-<br>
                火狐    -moz-<br>
                苹果    -webkit-<br>
                欧朋   10.5- -o-  10.5+ -webkit-<br>
                3d<br>
                perspective:800   景深<br>
                景深属性要给要3d变换的父元素；<br>
                transform-style:preserve-3d;<br>
                声明一个3d舞台<br>
                要加给父元素<br>
    </div>
    <div>
        <h2>animation动画</h2>
        动画：<br>
		关键帧(定义动画)：@keyframes<br>
		动画属性：<br>
		 animation（复合属性）<br>
		 anmation-name     动画名称<br>
		 animation-duration	动画持续时间<br>
		 animation-timing-function     动画的运动曲线<br>
		 animation-delay   动画延迟时间。<br>
		 animation-play-state 播放状态（ running 播放 和paused 暂停 ）<br>
		  animation-iteration-count	重复次数<br>
		  infinite重复无限次<br>
		  animation-direction	播放前重置<br>
		  alternate	动画直接从上一次停止的位置开始执行<br>
		  normal	动画第二次直接跳到0%的状态开始执行<br>
		  animation-fill-mode属性规定动画在播放之前或之后，其动画效果是否可见<br>
		animation-fill-mode : none | forwards <br>
    </div>
    <div>
        <h2>弹性布局（display:flex）</h2>
        弹性布局<br>
        display:flex<br>
        基本概念:<br>
        采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size。<br>
        默认设置下：主轴为水平方向，起点在左，终点在右，flex项目按从左至右排列<br>
        flex项目依据主轴的方向定义进行排列<br>
    </div>
    <div>
        <h2>响应式布局</h2>
        什么是响应式布局？<br>
       一个网页可以根据浏览设备的不同，比如phone,ipad,pc和特性，呈现出不同的布局方式；<br>
       响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验<br>
        常用写法一：<br>
        第一步，在HTML页面头部加入以下代码：<br>
        meta name=“viewport” content=“width=device-width, initial-scale=1.0”<br>
        meta viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明。<br>
        参数设置∶<br>
        width – viewport的宽度<br>
        height – viewport的高度<br>
        initial-scale – 初始的缩放比例<br>
        minimum-scale – 允许用户缩放到的最小比例<br>
        maximum-scale – 允许用户缩放到的最大比例<br>
        user-scalable – 用户是否可以手动缩放<br>
        第二步：在CSS文件中加入以下代码 <br>
        /*1280分辨率以上（大于1200px*/<br>
        @media screen and (min-width:1200px){<br>
        }<br>
        /*1100分辨率（大于960px，小于1199px）*/<br>
        @media screen and (min-width: 960px) and (max-width: 1199px) {<br>
        }<br>
        /*880分辨率（大于768px，小于959px）*/<br>
        @media screen and (min-width: 768px) and (max-width: 959px) {<br>
        }<br>
        /*720分辨率（大于480px，小于767px）*/<br>
        @media only screen and (min-width: 480px) and (max-width: 767px){<br>
        }<br>
        /*440分辨率以下（小于479px）*/<br>
        @media only screen and (max-width: 479px) {<br>
        }<br>
        常用写法二：<br>
        第一步，在HTML页面头部加入以下代码：<br>
        meta name=“viewport” content=“width=device-width, initial-scale=1.0”<br>
        meta viewport这个属性是在移动设备上设置原始大小显示和是否缩放的声明。<br>
        参数设置∶<br>
        width – viewport的宽度<br>
        height – viewport的高度<br>
        initial-scale – 初始的缩放比例<br>
        minimum-scale – 允许用户缩放到的最小比例<br>
        maximum-scale – 允许用户缩放到的最大比例<br>
        user-scalable – 用户是否可以手动缩放<br>
        第二步：<br>
        1、建立不同的CSS样式表pc.css,node.css,pad.css,iphone. css,reset.css<br>
        2、HTML里引用<br>
             公用样式引入<br>
             link rel="stylesheet"  href="css/reset.css"<br>
             link rel="stylesheet"   media="screen and (min-width:1200px)"  href="css/pc.css"<br> 
    </div>
    <div>
        <h2>属性继承</h2>
        text-align<br> 
        line-height<br> 
        font-size<br> 
        font-weight<br> 
        font-family<br> 
        text-overflow<br> 
        text-shadow<br> 
        white-space<br> 
        font-style<br> 
        color<br> 
        这些属性可以继承<br> 
    </div>
</body>
</html>